<template>
	<navigator class="product" :style="{width: size}" :url="url">
		<image class="product-image" :style="'width:' + size + ';' + 'height:' + imageHeight + ';' + imageStyle" :src="image" @load="imageLoad"></image>

		<text v-if="title" class="product-title" :style="'lines:' + titleLines + ';-webkit-line-clamp:' + titleLines + ';' + titleStyle">{{title}}</text>
		
		<slot name="coupon">
			<view class="tpf-product-coupon" v-if="promotionConfig.type=='coupon'">
				<view class="tpf-coupon-sale">
					<view class="tpf-coupon" :style="couponStyle"><text class="tpf-coupon-number">{{coupon}}元劵</text></view>
					<view class="tpf-coupon-sales" :style="saleStyle">月销 {{saleCountInner}}</view>
				</view>
			</view>
		</slot>
		
		<view class="price-line">
			<text class="tpf-coupon-sale" v-if="promotionConfig.priceLabel">{{promotionConfig.priceLabel}}</text>
			<view class="tpf-price-integral" v-if="promotionConfig.type=='integral'">
				<text class="tpf-integral-price">{{integral}}</text>
				<text class="tpf-price-plus" v-if="price"> +</text>
			</view>
			
			<tpl-price v-if="price" :price="price" :integerStyle="priceIntegerStyle" :decimalStyle="priceDecimalStyle" :currencySymbol="currencySymbol" :currencySymbolStyle="priceCurrencySymbolStyle" :precision="precision"></tpl-price>
			<text v-if="priceLabel" class="price-label" :style="priceLabelStyle">{{priceLabel}}</text>
		</view>
		
		<view class="tpf-price-settlement">
			<view class="tpf-price-settlement-left">
				<text v-if="discount" class="discount" :style="discountStyle">{{currencySymbol}}{{Number(discount).toFixed(precision)}}</text>
				<text v-if="marketPrice" class="market-price" :style="marketPriceStyle">{{currencySymbol}}{{Number(marketPrice).toFixed(precision)}}</text>
			</view>
			<text class="tpf-product-btn" :style="btn.btnStyle" v-for="(btn,btnIndex) of promotionConfig.btns" :key="'btn'+btnIndex">{{btn.text}}</text>
		</view>
		
	</navigator>
</template>

<script>
	export default {
		props: {
			type:{
				type:String,
				default:"normal",	// normal:正常模式   coupon:团购模式   integral:积分模式   vip:会员价
			},
			url: {
				type: String,
				default: ''
			},
			size: {
				type: String,
				required: true
			},
			precision: {
				type: Number,
				default: 2
			},
			
			image: {
				type: String,
				required: true
			},
			imageStyle: {
				type: String,
			},
			title: {
				type: String,
			},
			titleStyle: {
				type: String,
			},
			titleLines: {
				type: Number,
				default: 2,
			},
			price: {
				type: [Number, String],
				required: true,
				default: '0'
			},
			priceIntegerStyle: {
				type: String,
			},
			priceDecimalStyle: {
				type: String,
			},
			priceCurrencySymbolStyle: {
				type: String,
			},
			priceLabel: {
				type: String,
			},
			priceLabelStyle: {
				type: String
			},
			discount: {
				type: String|Number,
			},
			discountStyle: {
				type: String,
			},
			integral: {
				type: String|Number,
				default:0
			},
			marketPrice: {
				type: String|Number,
			},
			marketPriceStyle: {
				type: String,
			},
			sale: {
				type: String|Number,
				default:0
			},
			saleStyle: {
				type: String,
			},
			currencySymbol: {
				type: String,
				default: '￥'
			},
			coupon: {
				type: String|Number,
				default:0
			},
			couponStyle: {
				type: String,
			},
			promotionConfig:{
				type:Object,
				default:()=>{
					return {}
				}
			},
			btns:{
				type:Array,
				default:()=>{
					return []
				}
			}
		},
		data() {
			return {
				aspectRatio: 1
			}
		},
		computed: {
			imageHeight() {
				return this.toPx(this.size)*this.aspectRatio + 'px';
			},
			saleCountInner() {
				const sale = Number(this.sale);
				if (sale < 10000) {
					return sale.toFixed(0);
				} else if (sale > 10000 && sale < 100000) {
					return (sale / 10000).toFixed(1) + '万+';
				} else if (sale > 100000) {
					return (sale / 10000).toFixed(0) + '万+';
				}
			}
		},
		methods: {
			toPx(value) {
				const result = /(\d+\.?\d*)(\w+)/.exec(value);
				if ('rpx' === result[2].trim()) {
					return uni.getSystemInfoSync().screenWidth * Number(result[1]) / 750;
				} else if('px' === result[2].trim()) {
					return Number(result[1]);
				} else {
					throw new TypeError(`${value}单位格式不正确`);
				}
				
			},
			
			imageLoad(e) {
				this.aspectRatio = e.detail.height/e.detail.width;
				// console.log(this.aspectRatio);
				this.$emit('imageLoad')
			},
		},
	}
</script>

<style lang="scss" scoped>
	$uni-bg-color:#ffffff !default;
	$uni-font-size-sm:12px !default;
	$uni-font-size-base:14px !default;
	$uni-spacing-col-base: 20rpx !default;
	$uni-border-radius-sm: 6rpx !default;
	$uni-border-radius-lg: 24rpx !default;
	$uni-text-color-red: #ed1c24 !default;
	$uni-text-color-disable:#c0c0c0 !default;
	
	.product {
		// border-width: 1px;
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		background-color: $uni-bg-color;
		border-radius: $uni-border-radius-base;
	}
	
	.product-image {
		border-top-left-radius: $uni-border-radius-base;
		border-top-right-radius: $uni-border-radius-base;
		margin-bottom: $uni-spacing-row-sm;
	}
	
	.product-title {
		margin-left: $uni-spacing-col-sm;
		margin-right: $uni-spacing-col-sm;
		
		margin-bottom: $uni-spacing-row-base;
		font-size: $uni-font-size-base;
		text-overflow: ellipsis;
		/* #ifdef APP-PLUS-NVUE */
		lines: 2;
		/* #endif */
		
		/* #ifndef APP-PLUS-NVUE */
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		/* #endif */
	}
	
	.price-line {
		font-size: $uni-font-size-base;
		margin-left: $uni-spacing-col-sm;
		margin-right: $uni-spacing-col-sm;
		margin-bottom: $uni-spacing-row-sm;
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: flex-end;
	}
	.price-label {
		font-size: $uni-font-size-mi;
		margin-left: $uni-spacing-col-base;
		padding: 4rpx;
		border-width: 0.5px;
		border-style: solid;
		border-radius: $uni-border-radius-sm;
		border-color: $uni-text-color-red;
		color: $uni-text-color-red;
	}
	
	.discount,.market-price{
		font-size: $uni-font-size-sm;
		text-decoration: line-through;
		color: $uni-text-color-disable;
	}
	/* 劵场 */
	.tpf-product-coupon{
		margin-bottom: $uni-spacing-row-sm;
		padding: 0 $uni-spacing-col-sm;
	}
	.tpf-coupon-sale{
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: $uni-font-size-mi;
	}
	.tpf-coupon{
		background-color: #FF0000;
		padding:6rpx 20rpx;
		border-radius: 10rpx;
		position: relative;
	}
	.tpf-coupon::before,.tpf-coupon::after{
		content: "";
		width: 20rpx;
		height: 20rpx;
		background-color: #FFF;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		transform: translate(0,-50%);
	}
	.tpf-coupon::before{
		left: -12rpx;
	}
	.tpf-coupon::after{
		right: -12rpx;
	}
	.tpf-coupon-number{
		color: #FFF;
	}
	.tpf-coupon-sales{
		color: #a0a0a0;
	}
	.tpf-coupon-sale{
		color: #FE023B;
	}
	.tpf-price-settlement{
		font-size: $uni-font-size-base;
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction:row;
		align-items: flex-end;
		justify-content: space-between;
		margin-bottom: $uni-spacing-row-sm;
		margin-left: $uni-spacing-col-sm;
		margin-right: $uni-spacing-col-sm;
	}
	.tpf-integral-price{
		color:#FE023B;
	}
	.tpf-price-plus{
		color: #FE023B;
	}
	.tpf-price-integral{
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction:row;
	}
	.tpf-product-btn{
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		border-radius:10rpx;
	}
</style>